<template>
  <view class="container" :style="appThemeStyle">
    <view class="cell-group" v-for="(item, index) in configs" :key="index">
      <view class="cell-item">
        <view class="label title">{{ item.channelName }}</view>
        <view class="value"></view>
      </view>
      <view class="cell-item">
        <view class="label">自动接单</view>
        <view class="value">
          <u-switch v-model="item.receive" size="30" @change="updateReceive(item)"></u-switch>
        </view>
      </view>
      <view class="cell-item">
        <view class="label">自动备货</view>
        <view class="value">
          <u-switch v-model="item.stock" size="30" @change="updateStock(item)"></u-switch>
        </view>
      </view>
      <view class="cell-item" @click="onClickStockDelayTime(item)" v-if="item.stock">
        <view class="label">延时自动备货</view>
        <view class="value">
          <text class="mode">{{ item.stockDelaytime }}分钟</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    <!--延时自动备货-->
    <u-popup
      v-model="showPopup"
      mode="bottom" border-radius="20"
      :safe-area-inset-bottom="true"
      :closeable="true"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
    >
      <view class="popup-content">
        <view class="page-title">延时自动备货</view>
        <view class="list">
          <view class="item" v-for="(item, index) in list" :key="index" :class="{ active: item === selChannel.stockDelaytime }"
            @click="selectItem(index)">
            <text class="name">{{ item }}分钟</text>
            <text class="iconfont selected" v-if="item === selChannel.stockDelaytime">&#xe6ad;</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import * as SettingApi from "@/api/setting"
import store from '@/store'
import StoreModel from '@/common/model/Store'

export default {
  name: "index",
  data() {
    return {
      configs: [],
      checked: true,
      showPopup: false,
      list: [1, 5, 10, 15, 20],
      selChannel: {},
      selectedIndex: 0,
      shopId: ''
    }
  },
  computed: {
    store() {
      return store.getters.store
    },
    businessType() {
      return store.getters.businessType
    }
  },
  onLoad({ shopId }) {
    if (shopId) this.shopId = shopId
    this.getOrderConfig()
  },
  methods: {
    onClickStockDelayTime(item) {
      this.selChannel = item
      this.showPopup = true
    },
    selectItem(index) {
      this.selectedIndex = index
      this.showPopup = false
      const param = {
        id: this.selChannel.id,
        stockDelaytime: this.list[this.selectedIndex]
      }
      this.updateOrderConfig(param)
    },
    updateReceive(item) {
      const param = {
        id: item.id,
        isAutoReceive: item.receive ? 1 : 0
      }
      this.updateOrderConfig(param)
    },
    updateStock(item) {
      const param = {
        id: item.id,
        isAutoStock: item.stock ? 1 : 0,
        stockDelaytime: item.stockDelaytime
      }
      this.updateOrderConfig(param)
    },
    async getOrderConfig() {
      const shopId = !this.businessType ? this.shopId : this.store.id
      const { data: config } = await SettingApi.getShopsOrderConfig(shopId)
      this.configs = config
      this.configs.forEach(item => {
        item.receive = item.isAutoReceive === 1
        item.stock = item.isAutoStock === 1
        if (!item.stockDelaytime) item.stockDelaytime = 1

      })
    },
    async updateOrderConfig(param) {
      let data = {}
      try {
        data = await SettingApi.updateShopsConfigs(param)
      } catch (err) {
      }
      StoreModel.logs({
        status: data.code === 0 ? 1 : 0,
        operationType: 'channel_setting_update',
        remarks: '门店当前配置'
      })
      await this.getOrderConfig()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 24rpx;

  .cell-group {
    padding: 16rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-top: 16rpx;

    .cell-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border: none;
      }

      .label {
        font-size: 28rpx;
        color: #333333;
      }

      .value {
        display: flex;
        align-items: center;

        .mode {
          color: $main-bg;
          margin-right: 16rpx;
        }

        .iconfont {
          color: #666;
          font-size: 40rpx;
        }
      }

      .title {
        color: #666666;
      }
    }
  }

  .popup-content {
    padding: 24rpx;

    .page-title {
      text-align: center;
      margin-bottom: 40rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

    .list {
      min-height: 35vh;

      .item {
        margin-bottom: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 16rpx;
        border: 1rpx solid var(--eeeeee, #EEE);
        padding: 24rpx;
        font-size: 26rpx;

        &.active {
          border: 1rpx solid #2D71FD;

          .name {
            font-weight: bold;
          }
        }

        .selected {
          color: #2D71FD;
          font-size: 40rpx;
        }
      }
    }
  }
}
</style>
